var SliderView = Class.create({
  initialize: function(canvas, width, height){
	this.mousePressed = false;
    this.canvas = canvas;
	this.position = 0.5;
	this.models = [];
	with(this){
	  canvas.width  = width;
	  canvas.height = height;
	  
	  canvas.style.border = "solid 1px black";
	  canvas.addEventListener("click", function(evt){ handleClick(evt); }, true);
	  canvas.addEventListener("mousedown", function(evt){ handleMouseDown(evt); }, true);
	  //canvas.addEventListener("mouseup", function(evt){ handleMouseUp(evt); }, true);
	  window.document.addEventListener("mouseup", function(evt){ handleMouseUp(evt); }, true);
	  window.document.addEventListener("mousemove", function(evt){ handleMouseMove(evt); }, true);
	  canvas.addEventListener("mouseover", function(evt){ handleMouseOver(evt); }, true);
	  canvas.addEventListener("mouseout", function(evt){ handleMouseOut(evt); }, true);
	  draw();
	};
  }, second: function(evt){
	  console.info("Second up " + evt);
  }, draw: function(){
    var ctx = this.canvas.getContext("2d");
	ctx.clearRect(0, 0, this.w(), this.h());
	var width = this.h() - 20;
	ctx.save();
	//ctx.rotate( (2 * Math.PI) / 270);
	ctx.fillStyle = "black";
	for(var x = 10; x < this.w(); x += 10){
 	  ctx.fillRect(x, 10, 1, this.h() - 20);
	}
	ctx.translate((this.w() - width) * this.position, 0);
	//console.info(this.position);
	ctx.fillStyle = "rgb(155,155,155)";	
	ctx.fillRect(0, 10, width, this.h() - 20);
	ctx.restore();
  }, handleClick: function(evt){
    //this = canvas
	console.info("mouseclick " + evt);
	
    this.position = (evt.clientX - this.canvas.offsetLeft) / this.w();
	//console.info(this.position);
	for(var i=0; i < this.models.length; i++){
	  this.models[i].newValue(this.position);
	}
	this.draw();
  }, handleMouseDown: function(evt){
	  console.info("mousedown " + evt);
	  this.mousePressed = true;
  }, handleMouseUp: function(evt){
	  console.info("mouseup " + evt);
	  this.mousePressed = false;
  }, handleMouseMove: function(evt){
	  var minX = this.canvas.offsetLeft;
	  var maxX = minX + this.canvas.width;
	  if(this.mousePressed && minX < evt.clientX && evt.clientX < maxX){
	    console.info("mousemove " + evt.clientX + " is between " + 
					 minX + " and " + maxX);
		this.position = evt.clientX / this.canvas.width;
		this.draw();
	  }
  }, handleMouseOver: function(evt){
	  console.info("mouseover " + evt);
  }, handleMouseOut: function(evt){
	  console.info("mouseout " + evt);
  }, getCanvas: function(){
    return this.canvas;
  }, registerModel: function(model){
    this.models.push( model );
  }, h: function(){ return this.canvas.height; 
  }, w: function(){ return this.canvas.width; }
});
var XPosModel = Class.create({
  initialize: function(xPos, min, max){
    this.xPos = xPos;
	this.min = 0;
	this.max = 300;
  }, getValue: function(){
    return this.xPos;
  }, newValue: function(value){
    //console.info(value + " " + this.max);
    this.xPos = Math.round(value * this.max);
	//should be it's own view
	$('slider1_label').innerHTML = "<p>" + this.xPos + "</p>";
  }
});
console.info("loaded ui.js");